<template>
	<view class="pos-r padding-sm">
		<view class="border-radius bg-main padding">
			<view class="fwbd fs"></view><!--我的余额-->
			<view class="dflex-a padding-tb">
				<use-ring ref="ring" active-color="#ff696b" base-color="#ffbc49" >
					<view class="dflex-c dflex-flow-c">
						<view class="price tac">{{userInfo.znBalance}}</view>
						<view class="fs-xs ft-dark tac">总余额</view>
					</view>
				</use-ring>
			</view>
			
			<view class="dflex-c w-full margin-top" >
				<view @click="tixian" class="tac border-radius-lg padding-tb-sm fwb" style="border: 1px solid #ff6a6c; color: #ff6a6c; background: #fef0ef; width: 70vw;">立即提现</view>
			</view>
			<view class="dflex-c margin-top-sm margin-bottom-xl fs-xxs ft-dark">可提现余额：<text class="price fs-sm">{{userInfo.znBalance}}</text></view>
		</view>
		
		<view class="dflex-b margin-top-sm">
			<view class="border-radius dflex-c padding-lr-lg padding-tb bg-main margin-right-xs wpre-50" @click="toWithdrawalList">
				<view class="iconfont iconmingxi fs-70" style="color: #6f96f1;"></view>
				<view class="margin-left">
					<view class="fs-30 fwbd">
						提现记录
					</view>
					<view class="fs-xxs ft-dark">消费/提现情况</view>
				</view>
			</view>
			<view class="border-radius dflex-c padding-lr-lg padding-tb bg-main margin-left-xs wpre-50" @click="toRechargeList">
				<view class="iconfont iconmingxi fs-70" style="color: #6f96f1;"></view>
				<view class="margin-left">
					<view class="fs-30 fwbd">
						充值记录
					</view>
					<view class="fs-xxs ft-dark">充值详细情况</view>
				</view>
			</view>
		</view>
		
		<view class="border-radius bg-main padding margin-top-sm ">
			<view class="fwbd fs">余额充值</view>
			
			<view class="dflex money-area">
				<view v-for="(item,index) in addMoneys" :key="item" class="item flex1 wpre-30 dflex-c dflex-flow-c" :class="{ 'active': addMoneyIndex == index }" @click="addMoney(index,item)">
					<view class="price">{{item}}</view>
					<text class="fs-xs">到账￥{{item}}</text>
				</view>
			</view>
			<view class="dflex border-radius-sm field" style="padding: 11px;background-color: #f5f5f5;">
				<text class="margin-right-xs">￥</text>
				<input type="digit" class="w-full" v-model="money" placeholder="请输入充值金额" />
			</view>
			<view class="dflex-c w-full margin-tb" @click="toRecharge">
				<view class="tac border-radius-lg padding-tb-sm bg-warn fwb" style="width: 90vw;">充值</view>
			</view>
		</view>
		
		<use-popup v-model="cashoutPopup" bgclass=" " mode="center" borderRadius="20">
			<!-- 提现弹出框 -->
			<view class="padding-lr-xl cashout-area">
				<view class="margin-bottom-sm ft-dark fs-xxs">提现手续费 0%，单日限额20000</view>
				<view class="dflex border-radius-sm field">
					<text class="margin-right-xs">￥</text><input type="digit" class="w-full" v-model="withdrawalData.amount" placeholder="输入提现金额" />
				</view>
				<view class="margin-top-sm ft-dark fs-xxs">支付密码</view>
				<view class="dflex border-radius-sm field">
					<input class="w-full" type="password" v-model="withdrawalData.fundPassword" placeholder="输入支付密码" />
				</view>
				<view class="margin-top-sm ft-dark fs-xxs">支付宝姓名</view>
				<view class="dflex border-radius-sm field">
					<input class="w-full" v-model="withdrawalData.payee_real_name" placeholder="输入支付宝姓名" />
				</view>
				<view class="margin-top-sm ft-dark fs-xxs">支付宝账号</view>
				<view class="dflex border-radius-sm field">
					<input class="w-full" v-model="withdrawalData.payee_account" placeholder="输入支付宝账号" />
				</view>
				<view class="dflex-b ft-dark margin-top-sm fs-xxs">
					<view>提现到</view>
					<view>支付宝</view>
				</view>
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="cashout">
					立即提现
				</view>
			</view>
			
		</use-popup>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import {pay_recharge,pay_withdrawal,transfer_money,transfer_contribute} from "../../../js_sdk/apis/pay.js"
	export default {
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
		data() {
			return {
				data: {},
				payHtml:"",
				addMoneyIndex:0,
				addMoneys:[3600,10800,50000],
				contribute:0,
				cashoutPopup: false,
				// 提现金额
				money: 3600,
				integral:0,
				withdrawalData:{},
				cashoutVal: 0
			};
		},
		onShow() {
			this.$store.dispatch('user/GetInfo')	
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			tixian(){
				this.cashoutPopup = true
				//this.$api.msg('交易所系统升级，该功能暂无法使用');
			},
			loadData() {
				this.$nextTick(() => {
					this.$refs.ring.draw(1, 1);
				})
			},
			addMoney(index,money){
				this.addMoneyIndex=index
				this.money=money
			},
			toWithdrawalList(){
				uni.navigateTo({
					url:"cashout-record"
				})
			},
			toRechargeList(){
				uni.navigateTo({
					url:"recharge-record"
				})
			},
			ringSuccess() {
				// this.$api.msg('ringSuccess');
			},
			// 提现
			cashout() {
				this.withdrawalData.amount
				this.withdrawalData.amount = parseFloat(this.withdrawalData.amount) || 0;
				// 判断文本框是否为空
				if (!this.withdrawalData.amount || this.withdrawalData.amount <= 0) {
					this.$api.msg(`提现金额需大于0`);
					return;
				}
				
				let {amount,fundPassword,payee_real_name,payee_account}=this.withdrawalData
				let temp={
					amount,
					fundPassword:md5(fundPassword),
					payTypeId:1,
					payeeAttach:{
						payee_real_name,payee_account,remark:"申请提现"
					}
				}
				pay_withdrawal(temp).then(res=>{
					console.log(res)
					this.$api.msg('提交成功');
					this.cashoutPopup=false;
					this.withdrawalData={};
				}).fail(()=>{
					this.cashoutPopup=false;
				})
			},
			toRecharge() {
				pay_recharge({amount:this.money,payMode:"ali_app",payTypeId:1,requestAttach: JSON.stringify({subject:"充值余额"})}).then(res=>{
					uni.requestPayment({
					    provider: 'alipay',
					    orderInfo: res.data.content.responseAttach.replace(/&amp;/g, "&"), //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					    success: (res)=> {
							console.log(res)
							this.$api.msg('充值成功,可能延迟到账，请刷新余额。');
							setTimeout(()=> {
								this.$store.dispatch('user/GetInfo')
							}, 2000);
					    },
					    fail:(err)=> {
					        this.$api.msg('充值取消');
					    }
					});
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	
	.money-area {
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		.item {
			height: 150rpx;
			background: #f5f5f5;
			border-radius: 14rpx;
			
			.price {color: #333; margin-bottom: 10rpx;}
			text {color: #9a9a9a;}
			
			&:nth-child(2) {
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}
		
		.active {
			background: #ffbc49;
			color: #fff;
			
			.price, text {color:#fff !important;}
		}
	}

	.cashout {
		padding: 15rpx 60rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.cashout-area {
		width: 80vw;
		padding: 80rpx;

		.field {
			padding: 20rpx;
			background-color: #f5f5f5;

			input {
				height: 56rpx;
				line-height: 56rpx;
			}
		}
	}
</style>
